<template>
  <div>
      <rtheader :title="'绿币明细'" :ischeckin='true' ></rtheader>
      <div class="top-header v-c">
        <div class="a-c titletop">
          <span class="yl-my-lvb lvb-icon"></span>
          <span>{{coin}}</span>
        </div>
        <div  class="a-c lvb-how titletop">
          <span class="yl-ji-how lvb-icon lvb-how"></span>
          <span @click="gopointsrule" class="lvb-how">如何赚绿币</span>
        </div>
      </div>
      <ul class="pd-u v-c">
        <li v-for="(items,i) in titlelist" :key="i" class="a-c" @click="choosetab(i)"><span class="a-c" :class="{active:tabselected==i}" >{{items}}</span></li>
      </ul>
      <div class="loadmore-container" ref="pointsdetailWrapper"  style="height:72vh">
        <div class="loadmore-ul">
          <div class="shuoshuo-new" v-if="listnodata" style="height:6rem">
            <span class="yl-2kong nosvg">
              <span class="path1">
                <span class="path2">
                  <span class="path3">
                    <span class="path4">
                      <span class="path5">
                        <span class="path6">
                          <span class="path7">
                            <span class="path8">
                              <span class="path9"></span>
                            </span>
                          </span>
                        </span>
                      </span>
                    </span>
                  </span>
                </span>
              </span>
            </span>
            <span class="no-text">还没有相关内容哦~</span>
          </div>
          <ul class="pd-d-a">
            <li v-for="(items,index) in list" :key="index" class="a-c">
                <div class="pd-n">
                  <p class="type">{{items.displayName}}</p>
                  <p class="time">{{items.lastChangeTimeStamp}}</p>
                </div>
                <span class="addpoints" v-if="items.inOrDe==1">+{{items.changeCoin}}</span>
                <span class="lesspoints" v-else-if="items.inOrDe==2">-{{items.changeCoin}}</span>
            </li>
          </ul>
           <p style="padding-bottom:0.3rem;"></p>
        </div>
      </div>
  </div>
</template>
<script>
import api from "src/api/index";
import rtheader from "src/components/rotate/rt-header.vue";
export default {
name:"pointsdetail",
  data(){
      return{
        listnodata:"",
        coin:'',
        type:0,
        page:1,
        totalPage:'',
        is_r:false,
        titlelist:["全部","收入","支出"],
        tabselected:"",
        list:[],
      }
  },
  components:{
      api,
      rtheader,
  },
  mounted(){
    this.coin = this.$route.query.coin;
    this.queryCoinChangeRecordList().then(res=>{
      this.initScroll();
    })
  },
  methods:{
    queryCoinChangeRecordList(){
       let p = new Promise((resolve, reject) => {
         const params = {type:this.type,page:this.page,limit:10};
         api.queryCoinChangeRecordList(params).then(res=>{
           if(res.success){
               this.totalPage = res.data.totalPage
               this.list = this.is_r
                   ? [...this.list, ...res.data.list]
                   : res.data.list;
               if(this.page<res.data.totalPage){
                   this.is_r=false;
               }
               if(this.list.length==0){
                   this.listnodata = true;
               } else{
                   this.listnodata = false;
               }
               if(this.myscroll){
                 this.$nextTick(() => {
                   this.myscroll.refresh();
                 });
               } 
                resolve("获取兑换列表....");
           }
         })
       })
        return p;
    },
    choosetab(i){
      this.tabselected=i;
      this.type=i;
      this.page = 1;
      this.list =[];
      this.queryCoinChangeRecordList();
      this.myscroll.scrollTo(0,0)
    },
    gopointsrule(){
      this.$router.push("/pointsrule");
    },
    initScroll() {
      let p = new Promise((resolve, reject) => {
        let pointsdetailWrapper = this.$refs.pointsdetailWrapper;
        localStorage.tempPageHeight = document.getElementsByClassName(
          "loadmore-ul"
        )[0].scrollHeight;
        let _this = this;
        this.$nextTick(() => {
          _this.myscroll = new iScroll(pointsdetailWrapper, {
            preventDefault: false,
            onScrollMove: function() {
              if ((this.y <= (this.wrapperH - this.scroller.clientHeight-50))&& _this.is_r == false) {
                _this.is_r = true;
                if(_this.page<_this.totalPage){
                  _this.page++;
                  _this.queryCoinChangeRecordList();  
                }
              }
            },
            onScrollEnd: function() { },
            onScrollStart: function() {
              if (
                localStorage.tempPageHeight !=
                document.getElementsByClassName("loadmore-ul")[0].scrollHeight
              ) {
                this.refresh();
                localStorage.tempPageHeight = document.getElementsByClassName(
                  "loadmore-ul"
                )[0].scrollHeight;
              }
            }
          });
          resolve("初始化scroll");
        });
      });
      return p;
    },
  }

}
</script>
<style lang="less" scoped>

.top-header{
  height: 2.62rem;
  width: 100%;
  margin-top: -0.88rem;
  background: url("https://youlingqinius.wonderlandnet.cn/jf-bg.png") no-repeat center top;
  background-size: 100% 100%;
  justify-content: space-between;
  padding: 0 0.2rem;
  color:#ffffff;
  span{
    font-size:0.42rem;
    font-family: PingFangSC-Medium, sans-serif;
  }
  .lvb-icon{
    padding: 0.04rem 0.06rem 0 0;
  }
  .lvb-how{
    font-family: PingFangSC-Regular, sans-serif;
    font-size:0.28rem;
  }
}
.pd-u{
  height: 0.9rem;
  font-size: 0.34rem;
  padding: 0 0.2rem;
  border-bottom: 1px solid #e6e6e6;
  background: #ffffff;
  margin-bottom: 0.15rem;
  li{
    flex: 1;
    height: 100%;
  }
  span{
    width: 1.4rem;
    height: 100%;
     font-size: 0.32rem;
     color: #494949;
  }
  .active {
      border-bottom: 3px solid #fb685b;
      border-radius: 0.03rem;
      color: #FB6A5C
  }
}
.pd-d-a{
  background: #ffffff;
  .pd-n{
    line-height: 0.42rem;
      .type{
        color: #494949;
      }
      .time{
        color: #999999;
         font-size: 0.24rem;
      }
  }
  .addpoints{
    color: #FB685B;
  }
  .lesspoints{
    color:#32C5BC
  }
  li{
    padding: 0 0.3rem;  
    width: 100%;
    height: 1.2rem;
    justify-content: space-between;
    font-size: 0.3rem;
    border-bottom: 1px solid #e6e6e6;
  }
}
</style>


